<!doctype html>
<html>
    <head>
        <title>HT for Web 形状手册</title>
        <meta charset="UTF-8">    
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css"> 
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white; 
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {	
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;	
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }                        
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;                
            }            
            .logo{
                vertical-align: middle;
            }

        </style>        
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }
                
                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];
                    
                    // a small hack to make it work on android
                    iframe.ontouchstart = func;
                    
                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }   
            }
        </script>    
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT for Web 形状手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_overview">概述</a></li><li><a href="#ref_2d">二维</a><ul><li><a href="#ref_basic">基础属性</a></li><li><a href="#ref_style">样式属性</a> </li><li><a href="#ref_different">管线差异</a>  </li><li><a href="#ref_host">吸附功能</a>  </li></ul></li><li><a href="#ref_3d">三维</a><ul><li><a href="#ref_floor">地板类型</a></li><li><a href="#ref_wall">墙面类型</a></li><li><a href="#ref_pipeline">管道类型</a></li><li><a href="#ref_polyline">空间管线</a></li><li><a href="#ref_csgshape">挖空墙面</a></li><li><a href="#ref_rotation">旋转功能</a></li></ul></li></ul>

<hr/>

<div id="ref_overview"></div>

<h2>概述</h2>

<p><code>HT</code>提供的<code>ht.Shape</code>是极其强大的图元类型，其在<code>GraphView</code>和<code>Graph3dView</code>组件上都能展示出各种二维和三维的形状效果，
其扩展子类<code>ht.Polyline</code>可实现三维空间管道的功能，扩展子类<code>ht.CSGShape</code>可实现挖空等功能效果，本手册将逐一进行详细介绍。</p>

<div id="ref_2d"></div>

<h2>二维</h2>

<div id="ref_basic"></div>

<h3>基础属性</h3>

<p><code>ht.Shape</code>类型在<code>GraphView</code>组件上用于呈现多边形图元，其形状主要由<code>points</code>和<code>segments</code>这两个属性描述：
<code>points</code>为<code>ht.List</code>类型数组的顶点信息，顶点为<code>{x:100, y:200}</code>格式的对象；<code>segments</code>为<code>ht.List</code>类型的线段数组信息，
线段为<code>1~5</code>的整数，分别代表不同的顶点连接方式。</p>

<p>如果<code>segments</code>为空，则代表<code>points</code>数组中的顶点按数组顺序依次直线连接，因此直线段的类型无需设置<code>segments</code>参数。
<code>segments</code>主要用于需要绘制曲线，或者有跳跃断点的情况，其<code>1~5</code>的取值含义说明如下：</p>

<ul><li>1: <code>moveTo</code>，占用<code>1</code>个点信息，代表一个新路径的起点</li><li>2: <code>lineTo</code>，占用<code>1</code>个点信息，代表从上次最后点连接到该点</li><li>3: <code>quadraticCurveTo</code>，占用<code>2</code>个点信息，第一个点作为曲线控制点，第二个点作为曲线结束点</li><li>4: <code>bezierCurveTo</code>，占用<code>3</code>个点信息，第一和第二个点作为曲线控制点，第三个点作为曲线结束点</li><li>5: <code>closePath</code>，不占用点信息，代表本次路径绘制结束，并闭合到路径的起始点</li></ul>

<p><img src=""></p>

<p><code>ht.Shape</code>的主要属性函数：</p>

<ul><li><code>getPoints()</code>和<code>setPoints(points)</code>获取和设置点数组，参数为<code>Array</code>类型则内部转换成<code>ht.List</code>，为空则清除所有点</li><li><code>addPoint(point, index)</code>在指定的索引位置插入新点，<code>index</code>为空则插入到最后</li><li><code>setPoints(index, point)</code>在指定的索引位置替换新点</li><li><code>removePointAt(index)</code>删除指定索引位置的点</li><li><code>toPoints()</code>拷贝一份新的<code>ht.List</code>类型顶点数组</li><li><code>segments</code>属性为<code>Array</code>或<code>ht.List</code>类型，用于描述点连接样式，数组元素为整型值:  <ul><li>1: <code>moveTo</code>，占用<code>1</code>个点信息，代表一个新路径的起点</li><li>2: <code>lineTo</code>，占用<code>1</code>个点信息，代表从上次最后点连接到该点</li><li>3: <code>quadraticCurveTo</code>，占用<code>2</code>个点信息，第一个点作为曲线控制点，第二个点作为曲线结束点</li><li>4: <code>bezierCurveTo</code>，占用<code>3</code>个点信息，第一和第二个点作为曲线控制点，第三个点作为曲线结束点</li><li>5: <code>closePath</code>，不占用点信息，代表本次路径绘制结束，并闭合到路径的起始点</li></ul></li><li><code>isClosePath()</code>和<code>setClosePath(true)</code>获取和设置多边形是否闭合，默认为<code>false</code>，<a href="#ref_wall">墙面类型</a>通过设置闭合可无缝连接起始点    </li><li><code>getLength(resolution)</code>获取多边形长度，<code>resolution</code>为曲线微分片数，不传入则<code>HT</code>会采用系统默认值</li></ul>

<blockquote><p><code>ht.Shape</code>类型的<code>points</code>值与<code>width</code>、<code>height</code>和<code>position</code>这三个大小和位置信息存在联动关系，
即修改<code>points</code>会影响<code>width</code>、<code>height</code>和<code>position</code>相应值，同理修改<code>width</code>、<code>height</code>和<code>position</code>值也会影响<code>points</code>信息。</p></blockquote>

<div id="ref_style"></div>

<h3>样式属性</h3>

<p><code>ht.Shape</code>相关的<code>style</code>属性：</p>

<ul><li><code>shape.border.width</code>边框宽度，默认值为<code>0</code>表示不绘制边框</li><li><code>shape.border.color</code>边框颜色</li><li><code>shape.border.cap</code>边框末端线帽的样式，可选参数为<code>butt|round|square</code>
<img src=""></li><li><code>shape.border.join</code>边框当两条线交汇时创建边角的类型，可选参数为<code>bevel|round|miter</code>
<img src=""></li><li><code>shape.border.pattern</code>显示虚线样式，<code>Array</code>类型，例如<code>[5, 5]</code></li><li><code>shape.background</code>背景填充颜色，为<code>null</code>代表不填充背景</li><li><code>shape.gradient</code>渐近色类型：<ul><li>为空代表不绘制渐近色效果，只用<code>shape.background</code>纯色填充背景。</li><li>支持类型：<code>&#39;linear.southwest&#39;,&#39;linear.southeast&#39;,&#39;linear.northwest&#39;,&#39;linear.northeast&#39;,
&#39;linear.north&#39;,&#39;linear.south&#39;,&#39;linear.west&#39;,&#39;linear.east&#39;,
&#39;radial.center&#39;,&#39;radial.southwest&#39;,&#39;radial.southeast&#39;,&#39;radial.northwest&#39;,&#39;radial.northeast&#39;,
&#39;radial.north&#39;,&#39;radial.south&#39;,&#39;radial.west&#39;,&#39;radial.east&#39;,
&#39;spread.horizontal&#39;,&#39;spread.vertical&#39;,&#39;spread.diagonal&#39;,&#39;spread.antidiagonal&#39;,
&#39;spread.north&#39;,&#39;spread.south&#39;,&#39;spread.west&#39;,&#39;spread.east&#39;</code></li></ul></li><li><code>shape.gradient.color</code>背景渐近颜色 </li><li><code>shape.repeat.image</code>填充重复背景的图片，注意这里的图片不支持矢量</li><li><code>shape.dash</code>是否显示虚线，默认值为<code>false</code> </li><li><code>shape.dash.pattern</code>虚线样式，默认值为<code>[16, 16]</code></li><li><code>shape.dash.offset</code>虚线偏移，默认值为<code>0</code></li><li><code>shape.dash.color</code>虚线颜色</li><li><code>shape.dash.width</code>虚线宽度，默认为空代表采用<code>shape.border.width</code>值 </li><li><code>shape.dash.3d</code>虚线是否显示<code>3d</code>效果，默认值为<code>false</code></li><li><code>shape.dash.3d.color</code>虚线<code>3d</code>效果颜色，为空采用默认白色，呈现<code>3d</code>效果时连线的中间部分为该颜色</li><li><code>shape.dash.3d.accuracy</code>虚线<code>3d</code>效果精确度，该值越小<code>3d</code>渐进效果越好但影响性能，一般情况无需修改</li></ul>

<p><iframe src="examples/example_shape.html" style="height:250px"></iframe>   </p>

<div id="ref_different"></div>

<h3>管线差异</h3>

<p><code>ht.Polyline</code>类型继承于<code>ht.Shape</code>，其更多表现出与<code>ht.Edge</code>连线类似的特性，因此<code>ht.Polyline</code>上
的<code>label</code>、<code>note</code>和<code>icons</code>等附属部分位置和方向与连线类型类似会考虑折线的角度，从以下例子可只看出两者附件摆放的差异。</p>

<p><iframe src="examples/example_shapepolyline.html" style="height:270px"></iframe>  </p>

<p>从以上例子可发现<code>ht.Polyline</code>关闭了<code>setRotation</code>的旋转功能，更多差异见<a href="#ref_polyline">空间管线</a>章节</p>

<div id="ref_host"></div>

<h3>吸附功能</h3>

<p><code>ht.Node</code>图元通过<code>setHost(host)</code>函数可吸附到另外一个图元上，这样<code>host</code>图元进行移动和旋转时都会带动<code>attach</code>的吸附图元。
当<code>host</code>图元为<code>ht.Shape</code>类型时，则如果<code>attach</code>图元设置上<code>attach.*</code>的相关属性，可使得图元吸附到<code>ht.Shape</code>的指定线段位置上。</p>

<ul><li><code>attach.index</code>：默认值为<code>-1</code>，指定吸附到<code>ht.Shape</code>图元所在线段索引</li><li><code>attach.offset</code>：默认值为<code>0</code>，指定吸附在<code>ht.Shape</code>图元所在线段偏移位置</li><li><code>attach.offset.relative</code>：默认值为<code>false</code>，如果为<code>true</code>则偏移量代表所在线段长度乘以<code>attach.offset</code>值</li><li><code>attach.offset.opposite</code>：默认值为<code>false</code>，指定吸附到<code>ht.Shape</code>图元所在线段的正方向还是反方向偏移</li><li><code>attach.gap</code>：默认值为<code>0</code>，指定吸附到<code>ht.Shape</code>图元所在线段垂直方向的偏移</li><li><code>attach.gap.relative</code>：默认值为<code>false</code>，如果为<code>true</code>则与线段垂直方向的偏移为所<code>ht.Shape</code>的<code>thickness</code>值乘以<code>attach.gap</code></li><li><code>attach.thickness</code>：默认值为空，<code>CSGNode</code>默认值为<code>1.001</code>，为正值时吸附图元<code>height</code>属性值由<code>host</code>的<code>thickness</code>乘该值决定</li></ul>

<blockquote><p>吸附到<code>ht.Shape</code>线段的功能目前不支持<code>segments</code>设置为曲线的情况，也不考虑<code>ht.Shape</code>设置了<code>rotation</code>旋转值的因素，
当图元吸附到<code>ht.Shape</code>线段之后，其<code>rotation</code>和<code>position</code>位置会根据<code>ht.Shape</code>的自动变化同步；如果设置了<code>attach.thickness</code>值，
则图元的<code>height</code>也会根据<code>host</code>的<code>thickness</code>值自动调节，这些联动属性一般不需要用户设置。</p></blockquote>

<p><iframe src="examples/example_host.html" style="height:270px"></iframe></p>

<div id="ref_3d"></div>

<h2>三维</h2>

<div id="ref_floor"></div>

<h3>地板类型</h3>

<p><code>ht.Shape</code>图元当<code>thickness</code>属性小于<code>0</code>时常用于呈现地板效果的多边形模型，这种类型下<code>tall</code>属性决定地板的厚度，
一般常通过<code>floor.setElevation(floor.getTall()/2);</code>的方式将地板设置在海平面上。</p>

<p>地板类型由<code>shape3d.top.*</code>控制顶面参数，<code>shape3d.bottom.*</code>控制底面参数，<code>shape3d.*</code>控制厚度四周参数。
对于只需要平面不需要立体效果的情况，可通过将<code>shape3d.bottom.visible</code>和<code>shape3d.visible</code>的底面和四周可见参数设置为<code>false</code>实现。</p>

<p><code>GraphView</code>的二维上<code>ht.Shape</code>实现平铺贴图可通过<code>shape.repeat.image</code>属性设置，<code>Graph3dView</code>三维的平铺
可通过<code>shape3d.top.uv.scale</code>和<code>shape3d.top.bottom.scale</code>控制，但这种方式如果地板的大小发生变化时，
一般还需要再设置参数因此并不方便，<code>HT</code>提供的<code>repeat.uv.length</code>参数可解决这种问题，通过设置该参数，
贴图会根据图形大小自动调节平铺图片数，而且还能与<code>shape3d.top.uv.scale</code>和<code>shape3d.top.bottom.scale</code>的参数进行叠加，
当然大部分情况下如果设置了<code>repeat.uv.length</code>，就不需要设置<code>shape3d.top.uv.scale</code>和<code>shape3d.top.bottom.scale</code>参数。</p>

<p><iframe src="examples/example_floor.html" style="height:450px"></iframe></p>

<div id="ref_wall"></div>

<h3>墙面类型</h3>

<p><code>ht.Shape</code>图元当<code>thickness</code>属性大于<code>0</code>时常用于呈现墙面效果的多边形模型，这种类型下<code>tall</code>属性决定墙面的高度，
<code>thickness</code>代表墙厚度，一般常通过<code>wall.setElevation(wall.getTall()/2);</code>的方式将墙面设置在海平面上。</p>

<p>处于墙面类型时，模型相当于长条的六面体，因此可通过<code>all.*</code>、<code>left.*</code>或<code>right.*</code>等六面体参数进行控制，
参见<a href="../../core/3d/ht-3d-guide.html#ref_cube">3D手册六面体章节</a></p>

<p><iframe src="examples/example_wall.html" style="height:500px"></iframe></p>

<div id="ref_pipeline"></div>

<h3>管道类型</h3>

<p><code>ht.Shape</code>图元当<code>shape3d</code>属性为<code>cylinder</code>时，图元呈现为圆筒管道的模型效果，<code>tall</code>和<code>thickness</code>决定圆筒切面的宽高值，
当<code>tall</code>和<code>thickness</code>值一样时呈现为圆形切面，管道的走向由<code>points</code>和<code>segments</code>决定。</p>

<p>管道由<code>shape3d.top.*</code>控制顶面参数，<code>shape3d.bottom.*</code>控制底面参数，<code>shape3d.*</code>控制管道走向的中间部分效果。
通过将<code>shape3d.top.visible</code>和<code>shape3d.bottom.visible</code>设置为<code>false</code>，可实现空心管道的效果。</p>

<p><iframe src="examples/example_pipeline.html" style="height:500px"></iframe></p>

<div id="ref_polyline"></div>

<h3>空间管线</h3>

<p>以上介绍的类型都是基于<code>{x: 10, y: 20}</code>的二维点信息描述图形走向，<code>ht.Polyline</code>继承于<code>ht.Shape</code>，
支持<code>{x: 10, y: 20, e: 30}</code>格式的三维空间点描述，如果<code>e</code>值为空则取<code>elevation</code>的海拔值，
修改<code>ht.Polyline</code>的<code>elevation</code>和<code>tall</code>值时，会自动调节<code>points</code>顶点中的<code>e</code>值；
同理<code>points</code>顶点信息变化也会同步修改<code>ht.Polyline</code>的<code>elevation</code>和<code>tall</code>值。</p>

<ul><li><code>x</code>代表三维的<code>x</code>轴坐标</li><li><code>y</code>代表三维的<code>z</code>轴坐标，参见<a href="../../core/3d/ht-3d-guide.html#ref_2drelation">3D手册</a></li><li><code>e</code>代表三维的<code>y</code>轴坐标，可理解为<code>elevation</code>的简写，代表三维<code>y</code>轴的海拔高度</li></ul>

<p><code>ht.Polyline</code>同样支持<a href="#ref_basic">基础属性</a>章节介绍的<code>segments</code>参数，实现从二维的平面曲线延伸到了三维的空间曲线效果。
<code>ht.Polyline</code>关闭了<code>setRotationX</code>、<code>setRotationY</code>、<code>setRotationZ</code>以及<code>setClosePath</code>的函数功能。</p>

<p><code>ht.Edge</code>和<code>ht.Polyline</code>在展示效果上是很类似的，只不过<code>ht.Edge</code>的起始和结束点来自于<code>source</code>和<code>target</code>节点，
<code>ht.Edge</code>的<code>edge.type</code>属性为<code>points</code>时，<code>edge.points</code>和<code>edge.segments</code>对应于
<code>ht.Polyline</code>的<code>points</code>和<code>segments</code>属性，此时<code>edge.points</code>的顶点信息也可为<code>{x: 10, y: 20, e: 30}</code>的三维顶点格式，
其中<code>e</code>值为空时代表<code>0</code>。</p>

<p><code>ht.Edge</code>和<code>ht.Polyline</code>都有两种展示方式，默认显示为普通线框效果，当<code>shape3d</code>设置为<code>cylinder</code>时则显示为立体管线的效果，
<code>HT</code>通过微分段的方式实现曲线，因此为达到更高的均分曲线效果，两种方式都可通过<code>shape3d.resolution</code>控制曲线微分段数。</p>

<ul><li><p>普通线框效果：</p><ul><li><code>ht.Edge</code>通过<code>edge.width</code>控制宽度</li><li><code>ht.Edge</code>通过<code>edge.color</code>控制颜色</li><li><code>ht.Edge</code>通过<code>edge.gradient.color</code>控制颜色    </li><li><code>ht.Polyline</code>通过<code>shape.border.width</code>控制宽度</li><li><code>ht.Polyline</code>通过<code>shape.border.color</code>控制颜色    </li><li><p><code>ht.Polyline</code>通过<code>shape.border.gradient.color</code>控制渐进色</p></li></ul></li><li><p>立体管线的效果</p><ul><li><code>ht.Edge</code>通过<code>edge.width</code>控制宽度</li><li><code>ht.Polyline</code>通过<code>thickness</code>控制宽度 </li><li><code>ht.Edge</code>和<code>ht.Polyline</code>都可通过<code>shape3d.*</code>控制颜色和贴图等其他样式参数</li><li><code>ht.Edge</code>和<code>ht.Polyline</code>都可通过<code>shape3d.side</code>控制管道截面边数，如设置为<code>6</code>，则显示为六面体截面</li><li><code>ht.Edge</code>和<code>ht.Polyline</code>都可通过<code>shape3d.start.angle</code>控制管道截面起始边的角度</li><li><code>ht.Edge</code>和<code>ht.Polyline</code>都可通过<code>repeat.uv.length</code>控制贴图在管道走向方向上的自动平铺次数    </li><li><code>ht.Edge</code>和<code>ht.Polyline</code>都通过<code>shape3d.top.cap</code>和<code>shape3d.bottom.cap</code>控制起始结束部分，可取值如下：<ul><li><code>undefined</code>：默认值，代表镂空不封闭</li><li><code>flat</code>：代表平面进行封闭</li><li><code>round</code>：代表圆形体进行封闭</li></ul></li></ul></li></ul>

<p><iframe src="examples/example_polyline.html" style="height:600px"></iframe></p>

<p><code>Edge</code>和<code>Polyline</code>处于普通线框效果时可实现虚线的功能，有两种虚线效果：</p>

<ul><li><p>实空交替：</p><ul><li><code>ht.Edge</code>通过<code>edge.pattern</code>控制虚线模式，默认为空，设为<code>[20, 10]</code>代表一段长度<code>20</code>的实线，一段长度<code>10</code>的镂空，重复交替</li><li><p><code>ht.Polyline</code>通过<code>shape.border.pattern</code>控制虚线模式，默认为空，设为<code>[20, 10]</code>代表一段长度<code>20</code>的实线，一段长度<code>10</code>的镂空，重复交替</p></li></ul></li><li><p>颜色交替：</p><ul><li><code>ht.Edge</code>通过<code>edge.dash</code>控制是否启用颜色交替虚线，默认为<code>false</code></li><li><code>ht.Edge</code>通过<code>edge.dash.pattern</code>控制虚线模式，默认为<code>[16, 16]</code>代表长度<code>16</code>的<code>edge.dash.color</code>颜色，和长度<code>16</code>的<code>edge.coor</code>颜色重复交替</li><li><code>ht.Polyline</code>通过<code>shape.dash</code>控制是否启用颜色交替虚线，默认为<code>false</code></li><li><code>ht.Polyline</code>通过<code>shape.dash.pattern</code>控制虚线模式，默认为<code>[16, 16]</code>代表长度<code>16</code>的<code>shape.dash.color</code>颜色，和长度<code>16</code>的<code>shape.border.coor</code>颜色重复交替</li></ul></li></ul>

<blockquote><p><code>Graph3dView</code>默认关闭虚线功能，如需启用可通过<code>graph3dView.setDashDisabled(false)</code>启动虚线绘制功能。</p></blockquote>

<div id="ref_csgshape"></div>

<h3>挖空墙面</h3>

<p><a href="#ref_host">吸附功能</a>章节介绍<code>ht.Node</code>可吸附到<code>ht.Shape</code>类型线段上，
当引入<a href="../../plugin/modeling/ht-modeling-guide.html#ref_csgshape">ht-modeling.js</a>的建模扩展包后，
通过继承于<code>ht.Node</code>的<code>CSGNode</code>，和继承于<code>ht.Shape</code>的<code>ht.CSGShape</code>，可实现多边形墙面挖空的效果。</p>

<p><iframe src="examples/example_cull.html" style="height:600px"></iframe></p>

<blockquote><p>以上例子将<code>attach.thickness</code>设置为<code>1.001</code>,将高度设置为了<code>setTall(80.001)</code>，
此处的尾数<code>0.001</code>是为避免<code>js</code>浮点数运算的误差多预留的尺寸。</p></blockquote>

<p><code>CSGNode</code>的<code>attach.operation</code>属性默认值为<code>subtract</code>，代表可对<code>CSGNode</code>和<code>CSGShape</code>类型的<code>host</code>图元进行裁决挖空，
上例中通过将<code>3d.visible</code>设置为<code>false</code>隐藏了用于挖空的<code>CSGNode</code>，但对于门窗类型的应用，除了通过门窗模型挖空外，
还需要保留门窗的模型，而门窗类型一般厚度比墙面薄些，但如果<code>attach.thickness</code>小于<code>1</code>时则无法凿穿墙厚度，
为此<a href="../../plugin/modeling/ht-modeling-guide.html#ref_ext">建模扩展包</a>还提供了<code>DoorWindow</code>类型的图元，
方便用户构建门窗类型的模型，<code>DoorWindow</code>类型图元提供了<code>dw.s3</code>参数，该参数默认值为<code>[0.999, 0.999, 0.5]</code>，
代表真正显示在<code>3D</code>界面上的模型会参考<code>dw.s3</code>的尺寸再进行缩放，这样<code>attach.thickness</code>继续保持可凿穿的<code>1.001</code>即可。</p>

<div id="ref_rotation"></div>

<h3>旋转功能</h3>

<p>以上介绍的<a href="#ref_floor">地板类型</a>、<a href="#ref_wall">墙面类型</a>和<a href="#ref_pipeline">管道类型</a>三种类型，
都通过<code>{x: 10, y: 20}</code>的二维点信息描述图形走向，二维<code>y</code>坐标映射到三维的<code>z</code>坐标的转换关系请参见
<a href="../../core/3d/ht-3d-guide.html#ref_2drelation">3D手册</a>。
但这三种类型都支持<code>ht.Shape</code>的<code>rotationX</code>、<code>rotationY</code>和<code>rotationZ</code>的空间旋转功能，通过设置旋转参数可实现竖立的效果。</p>

<p><iframe src="examples/example_rotation.html" style="height:500px"></iframe></p>

<blockquote><p>以上例子通过不断改变<code>shape3d.uv.offset</code>参数可实现管道水平流动和截面方向旋转等特殊效果。</p></blockquote>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
